@charset "UTF-8";
@import 'reset';
@import 'common';
.web {
    section {
        //      padding-top: r(98px);
        //      padding-bottom: r(135px);
        position: absolute;
        left: 0;
        width: 100%;
        top: r(98px);
        bottom: r(135px);
        overflow-y: auto;
        .zha {
            margin: 0 auto;
            //          text-align: center;
            width: r(600px);
            height: r(200px);
            margin-top: r(40px);
            border-bottom: 1px solid #c5c5c5;
            .cjk {
                width: 56%;
                height: r(136px);
                text-align: left;
                p {
                    padding: 0 r(8px);
                    font-size: r(24.86px);
                }
            }
            .cjk_tu {
                width: r(240px);
                height: r(115px);
                img {
                    width: 100%;
                    height: r(177px);
                }
            }
            .xin {
                color: #c5c5c5;
                span {
                    font-size: r(28px);
                }
            }
            .anli {
                margin-top: r(25px);
                color: #c5c5c5;
                p {
                    font-size: r(24.86px);
                }
            }
        }
        .zhazha {
            margin: 0 auto;
            //          text-align: center;
            width: r(600px);
            height: r(200px);
            margin-top: r(40px);
            //          border-bottom: 18px solid #f5f5f5;
            .cjk {
                width: 56%;
                height: r(136px);
                text-align: left;
                p {
                    padding: 0 r(8px);
                    font-size: r(24.86px);
                }
            }
            .cjk_tu {
                width: r(240px);
                height: r(115px);
                img {
                    width: 100%;
                    height: r(177px);
                }
            }
            .xin {
                color: #c5c5c5;
                span {
                    font-size: r(28px);
                }
            }
            .anli {
                margin-top: r(25px);
                color: #c5c5c5;
                p {
                    font-size: r(24.86px);
                }
            }
        }
        .chen {
            width: r(600px);
            height: r(300px);
            margin: 0 auto;
            margin-top: r(15px);
            p {
                font-size: r(28px);
            }
            .guang {
                width: 100%;
                height: r(140px);
                margin-top: r(10px);
                ul {
                    li {
                        width: 33.3%;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
            .zheng {
                width: 100%;
                height: r(100px);
                .xiang {
                    img {
                        width: r(50px);
                        //                  height: r(50px);
                        border-radius: 50%;
                    }
                    span {
                        color: #C5C5C5;
                        font-size: r(25px);
                    }
                }
                .anli {
                    margin-top: r(25px);
                    color: #c5c5c5;
                    p {
                        font-size: r(24.86px);
                    }
                }
            }
        }
        .jiazai {
            text-align: center;
            font-size: r(28px);
            a {
                color: #C5C5C5;
            }
        }
    }
    .search_web {
        position: absolute;
        top: 100%;
        left: 0%;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 1;
        background-color: #f1f1f1;
        transition: top .3s;
        .search_quan {
            width: 100%;
            height: r(100px);
            background-color: #1f1f1f;
            .list_box {
                margin-left: r(12px);
                margin-top: r(50px);
                line-height: 0;
                i {
                    font-size: r(50px);
                }
            }
            .search_box {
                padding: r(22px) r(12px);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                background: #1e1e1e;
                label {
                    i {
                        font-size: r(26px);
                    }
                }
                .search_content {
                    margin: 0 r(20px) 0 r(22px);
                    flex: 1;
                    display: flex;
                    position: relative;
                    .search {
                        flex: 1;
                        height: r(50px);
                        border-radius: r(30px);
                        border: 1px solid #ffffff;
                        background: #1f1f1f;
                        color: #7e7e7e;
                        font-size: r(28.89px);
                        padding-left: r(70px);
                        outline: none;
                    }
                    i {
                        position: absolute;
                        left: 4%;
                        top: 52%;
                        font-size: r(30px);
                        transform: translateY(-50%);
                        color: #ffffff;
                    }
                }
            }
        }
        .yiche {
            margin: 0 auto;
            margin-top: r(30px);
            width: r(600px);
            height: r(300px);
            background-color: #fff;
            h3 {
                text-align: center;
                color: red;
                font-size: r(28px);
            }
            span {
                color: black;
                font-size: r(28px);
            }
            p {
                margin-left: r(10px);
                color: #898989;
                font-size: r(28px);
            }
            a {
                margin-left: r(10px);
                color: #898989;
                font-size: r(20px);
            }
        }
    }
    .denglu {
        position: absolute;
        top: 0;
        right: 100%;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 1;
        background-color: #222222;
        transition: right .3s;
        .search_box {
            border-bottom: 1px solid #484848;
            padding: r(16px) r(12px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: #1e1e1e;
            label {
                i {
                    font-size: r(50px);
                }
            }
            .search_content {
                margin: 0 r(20px) 0 r(22px);
                flex: 1;
                display: flex;
                position: relative;
                .search {
                    flex: 1;
                    height: r(50px);
                    border-radius: r(30px);
                    border: 1px solid #ffffff;
                    background: #1f1f1f;
                    color: #7e7e7e;
                    font-size: r(28.89px);
                    padding-left: r(70px);
                    outline: none;
                }
                i {
                    position: absolute;
                    left: 4%;
                    top: 52%;
                    font-size: r(30px);
                    transform: translateY(-50%);
                    color: #ffffff;
                }
            }
        }
        .denglu_top {
            width: r(600px);
            margin: 0 auto;
            text-align: center;
            .sheng_img {
                text-align: center;
                width: r(161px);
                height: r(142px);
                display: inline-block;
                margin-top: r(80px);
                img {
                    width: 100%;
                }
            }
            .search_content {
                //              margin: 0 r(20px) 0 r(22px);
                flex: 1;
                display: flex;
                position: relative;
                .search {
                    flex: 1;
                    height: r(60px);
                    //                  border-radius: r(30px);
                    border: 1px solid #222222;
                    background: #3d3d3d;
                    color: #FFFFFF;
                    font-size: r(28.89px);
                    padding-left: r(70px);
                    outline: none;
                }
                i {
                    position: absolute;
                    left: 0%;
                    top: 52%;
                    font-size: r(45px);
                    transform: translateY(-50%);
                    display: inline-block;
                    width: r(60px);
                    height: r(62px);
                    background-color: #303030;
                    color: #ffffff;
                }
            }
            .wjmm {
                a {
                    color: #FFFFFF;
                }
                i {
                    font-size: r(28.86px);
                }
                span {
                    font-size: r(28.86px);
                }
            }
            .zc {
                width: r(600px);
                //              height: r(500px);
                margin-top: r(150px);
                a:hover {
                    background-color: #b60005;
                }
                a {
                    margin: 0 auto;
                    margin-top: r(10px);
                    display: inline-block;
                    text-align: center;
                    width: r(600px);
                    height: r(75px);
                    color: white;
                    font-size: r(48px);
                    border: 1px solid red;
                }
            }
        }
    }
    .chen_web {
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 1;
        background-color: #222222;
        transition: left .3s;
        .search_box {
            border-bottom: 1px solid #484848;
            padding: r(16px) r(12px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: #1e1e1e;
            label {
                i {
                    font-size: r(50px);
                }
            }
            .search_content {
                margin: 0 r(20px) 0 r(22px);
                flex: 1;
                display: flex;
                position: relative;
                .search {
                    flex: 1;
                    height: r(50px);
                    border-radius: r(30px);
                    border: 1px solid #ffffff;
                    background: #1f1f1f;
                    color: #7e7e7e;
                    font-size: r(28.89px);
                    padding-left: r(70px);
                    outline: none;
                }
                i {
                    position: absolute;
                    left: 4%;
                    top: 52%;
                    font-size: r(30px);
                    transform: translateY(-50%);
                    color: #ffffff;
                }
            }
        }
        .xiao_quan {
            width: r(600px);
            height: r(500px);
            margin: 0 auto;
            text-align: center;
            margin-top: r(20px);
            .touxiang {
                img {
                    width: r(120px);
                    border-radius: 50%;
                }
                .biank {
                    color: #FFFFFF;
                    p {
                        font-size: r(28px);
                    }
                    span {
                        margin-left: r(10px);
                        border: 1px solid #FFFFFF;
                        color: #FFFFFF;
                    }
                }
            }
            .guanzu {
                display: inline-block;
                text-align: center;
                p {
                    color: red;
                    font-size: r(28.86px);
                }
                span {
                    color: #FFFFFF;
                }
            }
            .shouchang {
                width: r(600px);
                height: r(80px);
                margin: 0 auto;
                a {
                    width: r(250px);
                    height: r(60px);
                    border-radius: r(32px);
                    background-color: #cdcdcd;
                    display: inline-block;
                    font-size: r(38px);
                    color: #FFFFFF;
                }
                a:hover {
                    background-color: #b60005;
                }
                p {
                    text-align: center;
                }
            }
            .dropbtn {
                background-color: #222222;
                width: 100%;
                color: white;
                padding: r(0px);
                font-size: 16px;
                border: none;
                cursor: pointer;
            }
            .dropdown {
                margin-top: r(100px);
                position: relative;
            }
            .dropdown-content {
                margin-top: r(50px);
                width: 100%;
                margin: 0 auto;
                display: none;
//              position: absolute;
                background-color: #f9f9f9;
//              min-width: 160px;
//              box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }
            .dropdown-content a {
                font-size: r(28.86px);
                color: black;
                text-align: center;
//              padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .dropdown-content a:hover {
//              background-color: #f1f1f1
            }
            .dropdown:hover .dropdown-content {
                display: block;
            }
            .dropdown:hover .dropbtn {
//              background-color: #3e8e41;
            }
        }
    }
    #search_web_control {
        display: none;
        &:checked+.search_web {
            top: 0%;
        }
    }
    #denglu_web_control {
        display: none;
        &:checked+.denglu {
            right: 0%;
        }
    }
    #chen_web_control {
        display: none;
        &:checked+.chen_web {
            left: 0%;
        }
    }
    .kv {
        width: 100%;
        height: r(356px);
        img {
            width: 100%;
        }
    }
  .kv_bottom {
      width: 100%;
    height: r(104px);
        text-align: center;
        background-color: #733f13;
        position: absolute;
        top: r(255px);
        left: 0;
        color: #FFFFFF;
        p {
            margin-top: r(12px);
            font-size: r(24.86px);
        }
        span {
            font-size: r(25px);
        }
        a {
            font-size: r(28px);
        }
        .xin {
            margin-left: r(20px);
            margin-right: r(30px);
        }
        .shijian {
            margin-right: r(20px);
        }
    }
}